<template>
  <div class="custom-settings-container">
    <h2>个人设置</h2>
    <el-form class="settings-form" :model="form" label-width="90px">
      <el-form-item label="邮箱">
        <el-input v-model="form.email" placeholder="请输入邮箱" clearable />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" placeholder="请输入电话" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleEditInfo">保存信息</el-button>
      </el-form-item>
    </el-form>

    <el-divider />

    <el-form class="settings-form" :model="pwdForm" label-width="90px">
      <el-form-item label="原密码">
        <el-input v-model="pwdForm.oldPassword" type="password" placeholder="请输入原密码" show-password />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新密码" show-password />
      </el-form-item>
      <el-form-item label="确认新密码">
        <el-input v-model="pwdForm.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleEditPassword">修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const adminId = localStorage.getItem('adminId')

// 个人信息表单
const form = reactive({
  email: '',
  phone: ''
})

// 密码修改表单
const pwdForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 获取当前管理员信息（可选，若后端有接口可补充）
const fetchAdminInfo = async () => {
  // 可选：请求管理员信息并赋值到form
  // const res = await axios.get(`/api/admin/${adminId}/info`)
  // if (res.data.code === 200) {
  //   form.email = res.data.data.email
  //   form.phone = res.data.data.phone
  // }
}

// 保存个人信息
const handleEditInfo = async () => {
  try {
    const admin = {
      adminId,
      email: form.email,
      phone: form.phone
    }
    const res = await axios.put(
      `http://localhost:8080/admin/${adminId}/editInfo`,
      admin
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('个人信息修改成功')
    } else {
      ElMessage.error(res.data.msg || '个人信息修改失败')
    }
  } catch (e) {
    ElMessage.error('网络错误或服务器异常')
  }
}

// 修改密码
const handleEditPassword = async () => {
  if (!pwdForm.oldPassword || !pwdForm.newPassword || !pwdForm.confirmPassword) {
    ElMessage.warning('请填写完整密码信息')
    return
  }
  if (pwdForm.newPassword !== pwdForm.confirmPassword) {
    ElMessage.warning('两次输入的新密码不一致')
    return
  }
  try {
    const admin = {
      adminId,
      password: pwdForm.oldPassword
    }
    const res = await axios.put(
      `http://localhost:8080/admin/editPassword/${pwdForm.newPassword}`,
      admin
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('密码修改成功')
      pwdForm.oldPassword = ''
      pwdForm.newPassword = ''
      pwdForm.confirmPassword = ''
    } else {
      ElMessage.error(res.data.msg || '密码修改失败')
    }
  } catch (e) {
    ElMessage.error('网络错误或服务器异常')
  }
}

onMounted(fetchAdminInfo)
</script>

<style lang="scss" scoped>
.custom-settings-container {
  max-width: 420px;
  margin: 48px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(90, 169, 233, 0.10);
  padding: 36px 32px 28px 32px;

  h2 {
    text-align: center;
    color: #357ab8;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 2px;
  }

  .settings-form {
    .el-form-item {
      margin-bottom: 1.5rem;
      label {
        font-size: 1.1rem;
        color: #357ab8;
        font-weight: 500;
      }
      .el-input {
        width: 100%;
      }
    }
    .el-button {
      width: 100%;
      padding: 0.9rem;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: 6px;
      background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
      color: #fff;
      border: none;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
      &:hover {
        background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
      }
    }
  }
}
</style>